<template>
  <div style="position: relative; height: 100vh; width: 100%">
    <div id="play_window" style="height: 50vh; width: 100%; background: black"></div>

    <div :class="isFullScreen ? 'full-screen-bottom-controller' : 'normal-screen-bottom-controller'">
      <van-image
        :style="paddingStyle"
        width="20px"
        height="20px"
        fit="contain"
        :src="require(isFullScreen ? '../assets/ic_quit_full_screen.png' : '../assets/ic_enter_full_screen.png')"
        @click="toggleFullscreen" />
    </div>

    <div :class="isFullScreen ? 'full-screen-top-controller' : 'normal-screen-top-controller'">
      <van-image
        :style="paddingStyle"
        class="btn-full-screen"
        width="25px"
        height="25px"
        fit="contain"
        :src="require('../assets/ic_close_player.png')"
        @click="closePlayer" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    previewUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusBarHeight: 24,
      player: null,
      isFullScreen: false
    }
  },
  computed: {
    ...mapGetters(['getNativeApi']),
    paddingStyle() {
      if (this.isFullScreen) {
        return {
          paddingTop: '5px',
          paddingRight: `calc(${this.statusBarHeight}px + 10px)`,
          paddingBottom: '5px',
          paddingLeft: '10px'
        }
      } else {
        return {
          padding: '5px 10px'
        }
      }
    }
  },
  created() {
    this.getNativeApi.getStatusBarHeight().then(result => {
      this.statusBarHeight = result.data
    })
  },
  mounted() {
    this.init()
    this.createPlayer()
    this.realplay()
  },
  methods: {
    closePlayer() {
      if (this.isFullScreen) {
        this.toggleFullscreen()
      } else {
        this.$emit('closePlayer')
      }
    },
    toggleFullscreen() {
      this.isFullScreen = !this.isFullScreen
      this.player.JS_FullScreenDisplay(this.isFullScreen)
    },
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', () => {
        this.player.JS_Resize()
      })
    },
    createPlayer() {
      this.player = new JSPlugin({
        szId: 'play_window', //父窗口id，需要英文字母开头 必填
        // szBasePath: '/js/', // 必填,与h5player.min.js的引用路径一致
        szBasePath: '/data/user/0/com.kczyjg.hybird/cache/h5/js/', // 必填,与h5player.min.js的引用路径一致
        iMaxSplit: 1,
        iCurrentSplit: 1,
        openDebug: true,
        mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
        bSupporDoubleClickFull: false, //是否支持双击全屏，true-双击是全屏；false-双击无响应
        oStyle: {
          border: '#343434',
          borderSelect: '#000000FF',
          background: '#000'
        }
      })

      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: iWndIndex => {
          //插件选中窗口回调
          console.log('windowSelect callback: ', iWndIndex)
        },
        pluginErrorHandler: (iWndIndex, iErrorCode, oError) => {
          //插件错误回调
          console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
        },
        windowEventOver: iWndIndex => {
          //鼠标移过回调
          //console.log(iWndIndex);
        },
        windowEventOut: iWndIndex => {
          //鼠标移出回调
          //console.log(iWndIndex);
        },
        windowEventUp: iWndIndex => {
          //鼠标mouseup事件回调
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: bFull => {
          //全屏切换回调
          this.isFullScreen = bFull
          console.log('fullScreen callback: ', bFull)
          if (bFull) {
            this.getNativeApi.setStatusBarColor('#00FFFFFF')
            this.getNativeApi.setStatusBarLightMode(false)
          } else {
            this.getNativeApi.setStatusBarColor('#FFFFFF')
            this.getNativeApi.setStatusBarLightMode(true)
          }
        },
        firstFrameDisplay: (iWndIndex, iWidth, iHeight) => {
          //首帧显示回调
          console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
        },
        performanceLack: iWndIndex => {
          //性能不足回调
          console.log('performanceLack callback: ', iWndIndex)
        },
        StreamEnd: iWndIndex => {
          //性能不足回调
          console.log('recv StreamEnd: ', iWndIndex)
        },
        StreamHeadChanged: iWndIndex => {
          console.log('recv StreamHeadChanged: ', iWndIndex)
        },
        ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
          console.log('recv ThumbnailsEvent: ' + iWndIndex + ', eventType:' + eventType + ', eventCode:' + eventCode)
        },
        InterruptStream: (iWndIndex, iTime) => {
          console.log('recv InterruptStream: ' + iWndIndex + ', iTime:' + iTime)
        },
        ElementChanged: (iWndIndex, szElementType) => {
          //回调采用的是video还是canvas
          console.log('recv ElementChanged: ' + iWndIndex + ', szElementType:' + szElementType)
        }
      })
    },
    realplay() {
      const curIndex = this.player.currentWindowIndex
      this.player.JS_SetTraceId(curIndex, true)
      this.player.JS_Play(this.previewUrl, { playURL: this.previewUrl, mode: 0, keepDecoder: 0 }, curIndex).then(
        () => {
          console.log('realplay success')
          this.player.JS_GetTraceId(curIndex).then(id => {
            console.log('traceid:', id)
          })
        },
        e => {
          console.error(e)
        }
      )
    },
    stopAllPlayer() {
      this.player.JS_StopRealPlayAll()
    }
  },
  destroyed() {
    this.stopAllPlayer()
  }
}
</script>

<style lang="scss" scoped>
.full-screen-bottom-controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: rotate(90deg);
  transform-origin: 15px 50%;
}
.normal-screen-bottom-controller {
  position: absolute;
  bottom: 50vh;
  left: 0;
  right: 0;
  width: 100vw;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: none;
}

.full-screen-top-controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 30px;
  z-index: 9999999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: translateX(calc(100vw - 30px)) rotate(90deg);
  transform-origin: 15px 50%;
}

.normal-screen-top-controller {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 30px;
  z-index: 9999999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: none;
}
</style>
